//模块通过module和其他变量来访问编译过程中的某些数据
//模块变量是指涵盖了使用webpack编译的代码中的所有变量
const path = require('path')
const htmlPlugin = require('html-webpack-plugin')
//const uglify = require('uglifyjs-webpack-plugin');//插件已webpack内置,,在生产环境中使用
const extractTextPlugin = require('extract-text-webpack-plugin');
console.log(process.env.NODE_ENV)
module.exports = {
	entry: './src/entry.js',
	output: {
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js',
		publicPath:process.env.NODE_ENV === 'production'?'http://127.0.0.1:8080/':'http://127.0.0.1:8888/'
	},
	module: {//这只是使用loader的方式之一，另外还有内联式，在shell命令中指定
		rules:[
			{
				test:/\.css$/,
				// loaders:['style-loader','css-loader']//style-loader用来处理url问题
				use:extractTextPlugin.extract({
					fallback:"style-loader",
					use:[
						{
							loader:'css-loader',
							options:{
								importLoaders:1
							}
						},'postcss-loader'
					]
				})
			},
			{
				test:/\.(sass|scss)$/,
				// loaders:['style-loader','css-loader','sass-loader']
				use:extractTextPlugin.extract({
					fallback:'style-loader',
					use:['css-loader','sass-loader']
				})
			},
			{
				test:/\.(png|jpg|jpeg|gif)$/,
				use:[
					{
						loader:'url-loader',//url内置file-loader,url-loader会把图片转换成DataUrl的格式。
						options:{
							limit:500,//做了限制以后，不符合条件的将使用file-loader
							outputPath:'images/'
						}
					}
				]
			},
			{
				test:/\.js$/,
				use:{
					loader:'babel-loader',
					options:{
						presets:['es2015']
					}
				},
				exclude:/node_modules/
				
			}
		]
	},
	plugins:[
		new htmlPlugin({
			minify:{removeAttributeQuotes:true},
			hash:true,
			template:'src/index.html',
			filename:'index.html'
		}),
		// new uglify(),
		new extractTextPlugin("css/index.css")
	],
	devServer:{
		//webpack-dev-serve 在编译之后不会写入到任何输出文件，而是将bundle文件保留在内存中，
		//然后将他们serve到server中，就好像他们是挂载在server根路径中的真实文件一样
		contentBase:path.resolve(__dirname,'dist'),
		host:'localhost',
		port:'8888',
		compress:true,
	}
}